<template>
  <div>
    <van-nav-bar :title="t('home.userCenter')" left-arrow @click-left="onClickLeft" placeholder fixed/>
    <van-cell-group class="mt-2">
      <van-cell :title="t('login.account')" :value="userData['loginAccount']"></van-cell>
    </van-cell-group>
    <van-cell-group class="mx-2 mt-20">
      <van-button type="primary" size="large" @click="logout">{{t('login.logout')}}</van-button>
    </van-cell-group>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { postRequest } from "@/api";
import { localStorage } from "@/utils/local-storage";
import { STORAGE_TOKEN_KEY, STORAGE_USER_DATA_KEY } from "@/stores/mutation-type";
import router from "@/router";

const { t } = useI18n();
const data = localStorage.get(STORAGE_USER_DATA_KEY)
const userData = ref({})
if (!data) {
  router.push("/login");
} else {
  userData.value = { ...data };
}
const onClickLeft = () => history.back();
const clearLocalStorage = () => {
  localStorage.remove(STORAGE_TOKEN_KEY);
  localStorage.remove(STORAGE_USER_DATA_KEY);
}
const logout = async () => {
  const res = await postRequest('/logout', {})
  if (!res || res.returnCode !== 10000) return
  clearLocalStorage();
  await router.push("/login");
}
</script>

<style scoped lang="less">
:deep(.van-cell) {
  font-size: 1rem;
}

:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}
</style>
